<template>
	<div class="kaochangguanli flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">
      
      <div class="mb20"><i class="el-icon-arrow-left" style="margin-right: 10px; font-weight: bold; cursor: pointer;" @click="$router.back(-1)"></i>{{$route.query.name}}</div>
      
      <div style="margin-bottom: 20px;"><el-button @click="add" type="primary">新增新闻</el-button></div>

      <div class="flexc" style="margin-bottom: 20px;">
        <div>
          <el-input v-model="all.name" style="width: 250px; " placeholder="请输入新闻标题"></el-input>
        </div>
        <el-button type="primary" round style="margin-left: 20px;">搜索</el-button>
      </div>
      <el-table :data="tableData"  border  style="width: 100%">
          <el-table-column prop="title" label="新闻标题"></el-table-column>
          <el-table-column prop="desc" label="简介"></el-table-column>
          <el-table-column prop="create_time" label="发布时间"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button @click="bianji(scope.row)" type="text">编辑</el-button>
              <el-button @click="shanchu(scope.row)" type="text">删除</el-button>
              <el-button @click="chakan(scope.row)" type="text">查看详情</el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog  title="新闻管理"  :visible.sync="log"  width="1200px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">新闻标题：</div>
        <el-input v-model="all.title" style="width: 250px; " placeholder="请输入新闻标题"></el-input>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">简介：</div>
        <el-input v-model="all.desc" style="width: 250px; " placeholder="请输入简介"></el-input>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">新闻大图：</div>
        <div><chuantu @getimgid="getimgid3" :imgid="all.img_url" v-if="relo" :zi="'上传照片'" style="width: 200px; height: 200px;"></chuantu></div>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">新闻内容：</div>
        <fuwenben :content="all.content" @getcontent="getcontent" style="width: 900px;" v-if="relo"></fuwenben>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click='fabu'>保存</el-button>
      </div>

    </el-dialog>


	</div>
</template>

<script>
  import chuantu from '../../components/chuantu.vue'
  import fuwenben from '../../components/fuwenben.vue'
  import left from '../left.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      left,chuantu,fuwenben
    },
		data() {
			return {
        tableData:[],
        search:{
          page:1,
          page_size:20,
          sort_id:this.$route.query.id
        },
        total:0,
        log:false,
        all:{
          title:"",
          content:"",
          id:"",
          img_url:"",
          desc:"",
          sort_id:this.$route.query.id
        },
        relo:true
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      chakan:function(item){
        this.$router.push('/xinwen/detail?id='+item.id)
      },
      getimgid3:function(val){
        this.all.img_url = val
      },
      getcontent:function(val){
        this.all.content = val
      },
      jinru:function(item){
        this.$router.push('/xinwen/xinwen?id='+item.id)
      },
      add:function(){
        this.all ={
          title:"",
          content:"",
          id:"",
          img_url:"",
          desc:"",
          sort_id:this.$route.query.id
        }
        this.log = true
      },
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(this.IP_URL+'/admin/news/del',{id:item.id}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.$message.success('操作成功');
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      bianji:function(item){
        axios.get(this.IP_URL+'/admin/news/info?id='+item.id).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.all = JSON.parse(JSON.stringify(response.data.data))
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
            this.log = true
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fabu:function(){
        axios.post(this.IP_URL+'/admin/news/save',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.$message.success('操作成功');
            this.log = false
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getlist:function(){
        axios.get(this.IP_URL+'/admin/news/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
